<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bilibili 哔哩哔哩干杯~</title>
</head>

<body>
    <div class="main">
        <img src="image/head.png" alt="" onclick="new function(){alert('尚未开发')}">
        <img src="image/登录/head.png" alt="" class="headimg">
        <div class="headup"></div>
        <div class="mid">
            <div class="line0"></div>
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="mtext">登录</div>
            <img src="image/登录/2d.png" alt="" class="code2d">
            <img src="image/登录/tip.png" alt="" class="tiptip">
            <div class="tips">
                <div class="tip1">扫描二维码登录</div>
                <div class="tip2">请使用</div>
                <div class="tip3">哔哩哔哩客户端</div>
                <div class="tip4">扫码登录</div>
                <div class="tip5">或扫码下载客户端</div>
            </div>
            <img src="image/登录/22.png" alt="" class="img22">
            <img src="image/登录/33.png" alt="" class="img33">
            <div class="input i1">
                <input type="text" class="in lo1" placeholder="你的手机号/邮箱" value="ayi">
            </div>
            <div class="input i2">
                <input type="password" class="in lo2" placeholder="密码" value="123123">
            </div>
            <img src="image/登录/ccode.png" alt="" class="ccode" onclick="new function(){alert('尚未开发')}">
            <img src="image/登录/lochs.png" alt="" class="lochs" onclick="new function(){alert('尚未开发')}">
            <button class="lobt" onclick="login();">登录</button>
            <button class="rebt" onclick="new function(){
                timer = setTimeout(function () {
                    window.open('reg.html');
                    window.close('login.html');
                }, 500);}">注册</button>
            <img src="image/登录/any.png" alt="" class="any" onclick="new function(){alert('尚未开发')}">
            <img src="image/登录/text.png" alt="" class="dtex">
            <img src="image/登录/null1.png" alt="" class="null null1">
            <img src="image/登录/null2.png" alt="" class="null null2">
            <img src="image/登录/nulla.png" alt="" class="null null3">
            <img src="image/登录/error.png" alt="" class="erimg er1">
            <img src="image/登录/error.png" alt="" class="erimg er2">
        </div>
        <img src="image/foot.png" alt="" class="footimg" onclick="new function(){alert('尚未开发')}">
        <div class="successDiv">
            <i class="fa fa-check-circle fa-1x" aria-hidden="true"></i>
            &nbsp;登录成功！3秒后打开主页面...
        </div>
        <div class="back" onclick="back0();"></div>
    </div>
</body>

</html>

<style>
    .back {
        position: absolute;
        /* border: 1px red solid; */
        cursor: pointer;
        height: 30px;
        width: 117px;
        top: 20px;
        left: 30px;
    }

    /* border: red solid 1px; */
    .successDiv {
        position: fixed;
        top: -50px;
        left: 750px;
        height: 40px;
        width: 400px;
        border-radius: 5px;
        background-color: #f0f9eb;
        color: #67c23a;
        text-align: center;
        line-height: 40px;
        border: #90c57662 solid 1px;
        transition: top 0.4s;
    }

    .erimg {
        position: absolute;
        right: 5px;
    }

    .er1 {
        top: 167px;
        opacity: 0;
    }

    .er2 {
        opacity: 0;
        top: 237px;
    }

    .dtex {
        position: absolute;
        bottom: 10px;
        right: 380px;
    }

    .any {
        position: absolute;
        top: 420px;
        right: 90px;
    }

    .lobt {
        position: absolute;
        color: #ffffff;
        top: 375px;
        right: 260px;
        width: 180px;
        height: 35px;
        background-color: #00a7de;
        border: #0381aa solid 1px;
        cursor: pointer;
        transition: background-color 0.5s;
    }

    .lobt:hover {
        background-color: #00bdde;
    }

    .rebt {
        position: absolute;
        color: #555555;
        top: 375px;
        right: 38px;
        width: 180px;
        height: 35px;
        cursor: pointer;
        background-color: #f9fafc;
        transition: background-color 0.5s;
        border: #cccccc solid 1px;
    }

    .rebt:hover {
        background-color: #ffffff;
    }

    .lochs {
        position: absolute;
        top: 125px;
        right: 300px;
    }

    .ccode {
        position: absolute;
        top: 285px;
        right: 23px;
    }

    .input {
        position: absolute;
        height: 38px;
        width: 400px;
        left: 537px;
        border-radius: 3px;
        border: solid 1px #ddd;
        overflow: hidden;
        /* #f66495 */
    }

    .i1 {
        top: 160px;
    }

    .null {
        position: absolute;
        left: 535px;
    }

    .null1 {
        top: 204px;
        opacity: 0;
    }

    .i2 {
        top: 230px;
    }

    .null2 {
        opacity: 0;
        top: 274px;
    }

    .null3 {
        opacity: 0;
        top: 274px;
    }

    .in {
        position: absolute;
        height: 38px;
        width: 380px;
        top: 0;
        left: 10px;
        border-style: none;
        outline-style: none;
        color: rgb(126, 126, 126);
    }

    .img33 {
        position: absolute;
        top: 290px;
        left: 315px;
    }

    .img22 {
        position: absolute;
        top: 278px;
        left: 15px;
    }

    .tip5 {
        color: #717171;
        font-size: 14px;
        position: absolute;
        top: 68px;
        left: 15px;
    }

    .tip4 {
        color: #717171;
        font-size: 14px;
        position: absolute;
        top: 48px;
        left: 40px;
    }

    .tip3 {
        color: #00a1d6;
        font-size: 14px;
        position: absolute;
        top: 28px;
        right: 0;
    }

    .tip2 {
        color: #717171;
        font-size: 14px;
        position: absolute;
        top: 28px;
    }

    .tip1 {
        font-size: 18px;
        letter-spacing: 2px;
    }

    .tips {
        /* border: red solid 1px; */
        width: 146px;
        height: 100px;
        position: absolute;
        top: 308px;
        left: 166px;
    }

    .code2d {
        position: absolute;
        top: 100px;
        left: 170px;
        opacity: 1;
        transition: opacity 0.5s;
    }

    .code2d:hover {
        opacity: 1;
    }

    .tiptip {
        position: absolute;
        top: 100px;
        left: 17px;
        height: 190px;
        transition: opacity 0.7s;
        opacity: 0;
    }

    .tiptip:hover {
        opacity: 1;
    }


    .line0 {
        width: 430px;
        border-top: #ddd solid 1px;
        border-bottom: none;
        position: absolute;
        left: 0;
        top: 45px;
    }

    .line1 {
        width: 430px;
        border-top: #ddd solid 1px;
        border-bottom: none;
        position: absolute;
        right: 0;
        top: 45px;
    }

    .line2 {
        height: 295px;
        border-left: #ddd solid 1px;
        border-right: none;
        position: absolute;
        left: 489px;
        top: 95px;
    }

    .mtext {
        font-size: 38px;
        /* font-weight: bolder; */
        text-align: center;
        height: 30px;
        line-height: 30px;
        position: absolute;
        top: 30px;
        left: 450px;
    }


    .main {
        width: 1900px;
    }

    .headimg {
        position: absolute;
        top: 70px;
        left: 470px;
    }

    .footimg {
        position: relative;
        bottom: -100px;
    }

    .headup {
        position: absolute;
        top: 70px;
        height: 86px;
        width: 1900px;
        background-color: #00a0d8;
        z-index: -1;
    }

    .mid {
        position: relative;
        top: 90px;
        left: 460px;
        width: 978px;
        height: 500px;
        /* border: red solid 1px; */
    }
</style>

<script src="js.js"></script>